<template>
  <!-- 修改 -->
<div class="root">
  
  <div class="tianjia">

    <el-form ref="formRef" :model="numberValidateForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="审核人姓名:">
        <el-input v-model.string="numberValidateForm.reviewer_name" placeholder="请输入审核人姓名" type="text"
          autocomplete="off" />
      </el-form-item>

      <el-form-item label="openid:" prop="openid">
        <el-input v-model.number="numberValidateForm.openid" placeholder="请输入openid" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="手机号:" prop="mobile">
        <el-input v-model.number="numberValidateForm.mobile" placeholder="请输入手机号" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="部门">
        <el-cascader
        v-model="numberValidateForm.department"
        :emitPath="false"
        class="cascader"
        :props="optprops"
        :options="options2" 
        placeholder="请选择部门"  clearable />
      </el-form-item>

      <el-form-item label="职务:">
        <el-input v-model.string="numberValidateForm.job" placeholder="请输入你的职务" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item>
        <el-button @click="quxiao">取消</el-button>
        <el-button type="primary" @click="xiugai">确定</el-button>
      </el-form-item>

    </el-form>

  </div>

</div>

</template>

<script setup lang='ts'>
  import {ref,reactive,onMounted} from 'vue'
  import type { FormInstance } from 'element-plus'
  import router from '../../router/router'
  import { ElMessage } from "element-plus";
  import { useRoute } from 'vue-router';
  import {edit,department} from '../../api/login/index'//接口

// 接收跳转过来的参数
const Route = useRoute(); //获取到值
	onMounted(() => {
       console.log("获取到的参数", Route.query);  //接收到的参数
   })

  const formRef = ref<FormInstance>()


// 级联选择器
let optprops = {
  value: 'name',
  label: 'name',
  children: 'son'
}

const options2 = ref([])
let options3 = async() => {
  let res = await department({})
  // console.log(res);
  options2.value = res.data
}
options3()



// 修改
let numberValidateForm:any = reactive({ //参数
  reviewer_name: '',
  openid: '',
  mobile: '',
  department:'',
  job: '',
})
numberValidateForm.reviewer_name = Route.query.reviewer_name  //修改回显的数据
numberValidateForm.openid = Route.query.openid                //修改回显的数据
numberValidateForm.mobile = Route.query.mobile                //修改回显的数据
numberValidateForm.department = Route.query.department        //修改回显的数据
numberValidateForm.job = Route.query.job                      //修改回显的数据

let xiugai = async () =>{ //接口
  numberValidateForm.department = numberValidateForm.department[ numberValidateForm.department.length -1 ] //截取到最后一个值
  const data = { id: Route.query.id, formdata: numberValidateForm } //参数
  let res:any = await edit(data)
  console.log(res);
  if(res.code === '00000'){
    ElMessage({
      message: "修改成功",
      type: "success",
    });
    router.push('auditor')  //修改成功后跳转页面
  }
}


// 点击取消 清空表单数据
let quxiao =() =>{
  window.location.reload()
}


</script>

<style scoped lang='less'>
  .tianjia{
    width: 300px;
  }
</style>